<template>
  <div class="page-list__item">
    <div class="item-content" @click.stop="onHandleDetail">
      <div class="item-content-top">
        <span :class="busItem.bType == '产品'?'isProduct':''">{{busItem.bType}}</span>
        <div class="item-content-top-title">{{busItem.bLable}}</div>
        <div class="item-content-top-right">
          <van-icon name="clock-o" size="13px"/>
          <div>{{busItem.bLong}}</div>
        </div>
      </div>
       <div class="item-content-middle">
           <div :class="busItem.bMan == '供给方'?'isOffering':''">{{busItem.bMan == '供给方'?'供给方':'需求方'}}</div>
          <span>{{busItem.confirm}}</span>
        </div>
      <div class="item-content-bottom" >
        <div>
          <van-icon name="location-o" />
          {{busItem.bZone}}
        </div>
        <span>{{busItem.bDate}} 发布</span>
      </div>
    </div>
    <div class="item-react" v-if="busItem.isHasP">
      <div class="item-react-one" @click="onOutDate">
        <div class="item-react-one-icon">
          <img src="../../../assets/images/outDate.png" alt="">
        </div>
        <span>失效</span>
      </div>
      <div class="item-react-one">
        <div class="item-react-two-icon">
         <img src="../../../assets/images/edit.png" alt="">
        </div>
        <span @click="toEdit">编辑</span>
      </div>
    </div>
  </div>
    <van-overlay :show="show" @click="onOutDate" z-index="100">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="lable">商机失效</div>
          <span>确认后本商机将立即失效，无法进行推送、发送意向等操作，正在进行中的推送、意向任务将自动拒绝，是否确认？”，点击确认后商机状态变为“失效”</span>
          <div class="rect">
            <button @click="onCancle">取消</button>
            <button @click="onSure">确定</button>
          </div>
        </div>
      </div>
  </van-overlay>
  </template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { useRouter } from "vue-router";

const props = defineProps(['busItem'])
const show = ref(false)

const router = useRouter();

const onHandleDetail = () => {
  router.push('businessPool/details')
}
const onOutDate = () => {
   show.value = !show.value;
}
// 商机失效-取消
const onCancle = () => {   
  show.value = false;
}
// 商机失效-确定
const onSure = () => { 
  // 向后端做失效请求
  setTimeout(() => { 
    show.value = false;
  },500)
}
// 跳到编辑页
const toEdit = () => {   
  // router.push('')
}

</script>

<style lang="scss" scoped>
 .wrapper {
    position: relative;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

  }

  .block {
  width: 302px;
  height: 281px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:24px 24px 23px 24px;
  box-sizing: border-box;
  .lable{
    line-height: 24px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    font-size: 16px;
    text-align: center;
  }
  span{
    margin-top:24px;
    line-height: 24px;
    font-family: PingFang SC;
    color: #86909c;
    font-size: 16px;
    vertical-align: left;
    text-align: left;
  }
   .rect{
     width: 302px;
    margin-top:24px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    button:nth-child(1){
     width: 121px;
    height: 42px;
    background: #f2f3f5;
    border-radius: 100px;
    color: #1d2129;
    border-color: transparent;
    }
     button:nth-child(2){
      background-color: red;
      border-color: transparent;
      color:#ffffff;
      width: 121px;
      height: 42px;
      border-radius: 100px;
    }
    }
  }
 
.page-list__item{
  // width: 343px;
  background: #ffffff;
  border-radius: 6px;
  padding:12px 8px;
  display: flex;
  flex-direction: column;
   .item-content{
     .item-content-top{
      display: flex;
      align-items: center;
      margin-left:8px;
      span{
        display: flex;
        justify-content: center;
        align-items:center;
        width: 28px;
        height: 16px;
        background: #0fc6c2;
        border: 1px solid;
        border-color: #0fc6c2;
        border-radius: 3px;
        line-height: normal;
        font-family: Inter;
        font-weight: 500;
        color: #ffffff;
        font-size: 10px;
      }
      .isProduct{
        display: flex;
        justify-content: center;
        align-items:center;
        width: 28px;
        height: 16px;
        border: 1px solid;
        border-radius: 3px;
        line-height: normal;
        font-family: Inter;
        font-weight: 500;
        color: #ffffff;
        font-size: 10px;
        background: #f7c359;
        border-color: #f7c359;
      }
      .item-content-top-title{
        width: 211px;
        height: 24px;
        line-height: normal;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        font-size: 17px;
        margin-left:4px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space:nowrap;
      }
      .item-content-top-right{
        color:#ffffff;
        width: 52px;
        height: 22.35px;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        padding:4.67px 6px;
        align-items: center;
        background: linear-gradient(90deg,#ff403b 0%,#ff6d69 100%);
        border-radius: 14px 12px 2px 14px;
        font-size: 14px;
        margin-left: 16px;
      }
    
    }
      .item-content-middle{
        margin-top:8px;
        margin-left:8px;
        display: flex;
        div{
          width: 38px;
          height: 16px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #ffffff;
          border: 1px solid;
          border-color: #f4423e;
          border-radius: 3px;
          line-height: normal;
          font-family: Inter;
          font-weight: 500;
          color: #f4423e;
          font-size: 10px;
        }
        .isOffering{
         border-color:#4795ff;
         color:#4795ff;
        }
       span{
        line-height: normal;
        font-family: PingFang SC;
        color: #4e5969;
        font-size: 13px;
        margin-left:4px;

       }
      }
      .item-content-bottom{
        margin-top:7px;
        padding:0 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: normal;
        font-family: PingFang SC;
        color: #86909c;
        font-size: 12px;
        span{
          margin-right:10px;
        }
      }
     }
  .item-react{
  margin-top: 8px;
  width: 350px;
  height: 44px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 0.5px solid;
  border-color: #ebebeb;
  display: flex;
  font-family: PingFang SC;
  color: #1d2129;
  font-size: 14px;
  .item-react-one{
     display: flex;
    .item-react-one-icon{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff5f4;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 9.2px;
      height: 9.62px;
    }
    }
    span{
      display: flex;
      flex-shrink: 0;
      margin-left:4px;
      line-height:normal;
      font-family:PingFang SC;
      color:#1d2129;
      font-size:14px;
    }
  }
  .item-react-two-icon{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff5f4;
    display: flex;
    justify-content: center;
    align-items: center;
  img{
      width: 10px;
      height: 10px;
    }
  }
  }
}

</style>

